<template>
  <div>
    <div class="row minw100">
      <div class="col-md-12">
        <div class="portlet box grey-cascade">
          <!-- 页面头部标题 start  -->
          <div class="portlet-title">
            <div class="caption myFontSisz14" v-if="type=='add'">
              <i class="fa fa-globe"></i>角色/职务新增
            </div>
            <div class="caption myFontSisz14" v-if="type=='update'">
              <i class="fa fa-globe"></i>角色/职务编辑
            </div>
            <div class="caption myFontSisz14" v-if="type=='info'">
              <i class="fa fa-globe"></i>角色/职务名称及数据权限
            </div>            
          </div>
          <!-- 页面头部标题 end  -->
          <!-- 页面主题内容部分 start  -->
          <div class="portlet-body">
            <!-- <div class="row focusNone">
              <div class="col-md-3 l10" style="white-space: nowrap; line-height: 30px">
                <span class="require">*</span> 角色/职务名称:
                <div class="col-md-9">
                  <el-input v-model="" :disabled="is_disabled" placeholder="角色名"></el-input>
                </div>
              </div>
            </div> -->
            <div class="row mr0 focusNone">
              <div class="col-md-6 color">
                <div class="col-md-3 l10" style="white-space: nowrap; line-height: 25px">
                <span class="require">*</span> 角色/职务名称 :</div>
                <div class="col-md-9">
                  <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="detail.role_name" placeholder="角色名" type="text">
                </div>
              </div>
            </div>
            <div class="row mr0 focusNone">
              <div class="col-md-6 color">
                  <div class="col-md-3 l10" style="line-height: 25px;">
                    <span class="require">*</span>  
                    数据权限 :
                  </div>
                  <div class="col-md-9">
                    <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="detail.data_rule" placeholder="权限" type="text">
                  </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="myBottomBorder">
                  角色/职务菜单及操作权限
                </div>
              </div>
            </div>
            <div class="myTabDiv">
              <el-table
                ref=""
                :border = true
                :stripe = true
                style="width: 100%" >
                <el-table-column prop="" label="模块" > </el-table-column>
                <el-table-column prop="" label="菜单权限" > </el-table-column>
                <el-table-column prop="" label="操作权限" > </el-table-column>
              </el-table>
            </div>
            <div class="row">
              <div class="col-md-12" style="padding-left: 30px">
                <button type="button" v-if="type=='add'" @click="" class="btn blue">新增</button>
                <button type="button" v-if="type=='update'" @click="" class="btn blue">保存</button>
                <router-link to="/jsgl" tag="a" class="btn default">返回</router-link>
              </div>
            </div>
          </div>
        <!-- 页面主题内容部分 end  -->
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
    .myBottomBorder{
      padding: 5px 0 10px;
      margin: 0 10px;
      border-bottom: 1px solid #dbdbdb;
      font-weight:500;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .myFontSisz14{
      font-size: 14px !important;
    }
    .myTabDiv{
      padding: 0 15px;
      box-sizing: border-box;
    }
</style>

<script>
  import '../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';
  import Metronic from '../../../../static/global/js/metronic.js';
  import {check,Tips} from '../../../../static/js/pages/tips.js';
  import ComponentsPickers from '../../../../static/js/pages/components-pickers.js';

  import NotConTip from '../../../components/noConTip.vue'
  import optVue from '../../../config/optVue.js';
  import Loading from '../../../components/loading.vue';
  import { getRoleDetail, getDistrictList, createArea, modifyArea } from '@/api/area';

  export default {   
    data(){
      return{
        title:"",
        
        id: null,
        detail:{},
        district_list:[],
        district_loaded: false,
        district_selected:null,
        loading:false,

        type:'',
        is_modifly:true,
        is_disabled:false,
      }
    },
    components: {
        NotConTip
    },
    mounted(){
      var that = this;
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;

      if (this.type == 'info') { //查看
        this.is_modifly = true;
        this.is_disabled = true;
        this.fetchDetail();
      }

      if(this.type=='update'){ //修改
        this.is_modifly = false;
        this.fetchDetail();
      }

      if(this.type=='add'){
        this.is_modifly = false;
      }
    },

    methods:{     
      fetchDetail:function() {
        let vm = this;
        this.loading = true;

        getRoleDetail(this.id)
        .then(response => {
          vm.detail = response.data;
          console.log(vm.detail);
          vm.district_list.push(vm.detail.district_info);
          vm.district_selected = vm.detail.district_info.value;
          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        })
      }, 

      clickSelect:function(res) {
        if (!res) {
          return;
        }

        console.log('clickSelect ---->' + res);
        let vm = this;
        if (!this.district_loaded) {
          this.loading = true;
          getDistrictList()
          .then(response => {
            vm.district_list = response.data;
            vm.district_loaded = true;
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          })
        }

        if(this.district_selected != -1){
          $(".errorId").addClass("hide");
          $(".errorId").closest(".col-md-6").find("select").removeClass("errorInput");
        }
      },

      inputFunc:function(e){
        if($.trim($(e.target).val())!=""){
          $(e.target).closest(".col-md-6").find(".errorInfor").addClass("hide");
          $(e.target).closest(".col-md-6").find("input").removeClass("errorInput");
        }
      },

      isValidate:function(){
        var res = true;
        if(this.area_name==""){
          $(".errorName").removeClass("hide");
          $(".errorName").closest(".col-md-6").find("input").addClass("errorInput");
          res = false;
        }

        if(this.area_address==""){
          $(".errorAddress").removeClass("hide");
          $(".errorAddress").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
        if(this.district_selected == -1){
          $(".errorId").removeClass("hide");
          $(".errorId").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }

        return res;
      },

      modify:function(){
        if(!this.isValidate()){
          return;
        }

        this.detail.district_id = this.district_selected;

        let vm = this;
        this.loading = true;
        modifyArea(this.id, this.detail)
        .then(response => {
          vm.loading = false;
          vm.$router.go(-1);
        })
        .catch(error=> {
          vm.loading = false;
        });
      },

      create:function(){
        if(!this.isValidate()){
          return;
        }

        this.detail.district_id = this.district_selected;

        let vm = this;
        this.loading = true;
        createArea(this.detail)
        .then(response => {
          vm.loading = false;
          vm.$router.go(-1);
        })
        .catch(error=> {
          vm.loading = false;
        });
      }
    }
  
  }

</script>